<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			在chrome下，图片底部会有50px的空白
			在ie和Firefox下，图片底部没有空白
			
			造成这个兼容差异的原因是
			chrome下是子元素超过content-box尺寸触发滚动条显示
			ie和Firefox下是超过padding-box尺寸触发滚动条显示
			
			要实现在各个浏览器下都有底白，可以给Img添加一个margin去掉padding
			*/
			.a{
				height: 100px;
				width: 300px;
				padding: 50px 0;
				overflow: auto;
			}
			/* img{
				margin: 50px 0;
			} */
		</style>
	</head>
	<body>
		<div class="a">
			<img src="../img/1.jpg" width="200" height="200">
		</div>
	</body>
</html>
